<template>
   <div class="doctor-details-box">
        <template v-if="!isChange">
            <div class="content-box">
                <div class="head-img">
                    <img :src="doctorInfo.doctorHeadImg" alt="">
                </div>
                <div class="message-box">
                    <div class="user-name">
                        <div class="doctor-icon"><img src="@/assets/img/icon_doctor.png" alt=""></div>
                        <div>{{doctorInfo.trueName}}</div>
                        <el-tag>{{doctorInfo.doctorJobTitle}}</el-tag>
                    </div>
                    <div class="user-message">
                        <div>
                            <div><span>医生账号：</span>{{doctorInfo.mobile}}</div>
                            <div><span>所属科室：</span>{{doctorInfo.departmentName}}</div>
                            <div><span>工作年限：</span>{{doctorInfo.workExperience}}</div>
                        </div>
                        <div>
                            <div><span>出生日期：</span>{{doctorInfo.birthday}}</div>
                            <div><span>医生性别：</span>{{doctorInfo.doctorSex | sexFilter}}</div>
                            <div><span>执业点：</span>{{doctorInfo.doctorWorkAddress}}</div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="text-box top-text">
                <p>擅长：</p>
                <p>{{doctorInfo.doctorSpecialty}}</p>
            </div>
            <div class="text-box">
                <p>简介：</p>
                <p>{{doctorInfo.doctorSynopsis}}</p>
            </div>
            <div class="text-box">
                <p>二维码：</p>
                <p>
                    <img class="code-size" :src="qrCodeUrl" alt="">
                </p>
            </div>
            <div class="text-box">
                 <p></p>
                <p><el-button class="btn-size" type="primary" plain size="mini" @click="saveCode">下载二维码</el-button></p>
                
            </div>
            <div class="change-btn"><el-button type="primary" @click="change()">修改</el-button></div>
        </template>
        <template v-else>
            <change-doctor-pesonal :doctorInfo="doctorInfo"  @sent-flag='getFlag'></change-doctor-pesonal>
        </template>
    </div>
</template>

<script>
import changeDoctorPesonal from './change-doctor-pesonal'
export default {
    components: {
        changeDoctorPesonal
    },
    name: 'doctorPesonalDetails',
    props: {
    },
    data() {
        return {
            isChange: false,
            doctorInfo: {},
            qrCodeUrl:'',
        }
    },
    mounted(){
        this.getDoctorInfo();
        this.creatQrCode();
    },
    methods: {
        change() {
            this.isChange = true;
        },
        getFlag(e) {
            this.isChange = e;
            this.getDoctorInfo();
        },
        getDoctorInfo() {
            this.$ajax.getDoctorInfo({}).then(res => {
                this.doctorInfo = res.data
            })
        },
        creatQrCode(){//生成二维码
            let params = {
                doctorId:this.$authInfo.getUser().id,
                path:`pages/user_side/index/index_doctorlist/index_doctor_details/index_doctor_details?doctorId=${this.$authInfo.getUser().id}`,
            }
            this.$ajax.getQRCode(params).then(res => {
                this.qrCodeUrl = res.data.data
            }).catch(err => {
                this.$util.message(err.msg, 'error')
            });
        },
        downloadIamge(imgsrc, name) {//下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            
                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },
        saveCode(){// 保存二维码
            this.downloadIamge(this.qrCodeUrl, this.doctorInfo.doctorname)
        }
    }
}
</script>

<style lang='scss'>
    .doctor-details-box {
        .content-box {
            display: flex;
        }
        .head-img {
            width: 128px;
            height: 180px;
            > img {
                width: 100%;
                height: 100%;
            }
        }
        .message-box {
            width: 70%;
            margin-left: 40px;
            color: #3C3C3C;
        }
        .user-name {
            display: flex;
            align-items: center;
            font-size: 22px;
            .doctor-icon{
                width: 20px;
                height: 22px;
                > img {
                    width: 100%;
                }
            }
            > div:nth-child(2) {
                margin: 0 32px;
            }
            /deep/ .el-tag {
                color: #006DB8;
                border: none;
                border-radius: 10px;
            }
        }
        .user-message {
            display: flex;
            > div {
                width: 50%;
                > div {
                    margin-top: 25px;
                    font-size: 14px;
                    > span {
                        color: #757575;
                        display: inline-block;
                        width: 80px;
                    }
                }
            }
        }
         .text-box {
            margin-top: 30px;
            font-size: 14px;
            color: #757575;
            display: flex;
            > p {
                &:first-child {
                    width: 120px;
                }
            }
        }
        .top-text {
            padding-bottom: 30px;
        }
        .change-btn {
            text-align: center;
            margin-top: 95px;
        }
        .code-size{
            width: 300px;
            height: 330px;
        }
        .btn-size{
            margin-left: 105px;
        }
    }
</style>
